اضافة ازرار المراسلة في مدونتك DEMO

إضافة أزرار المراسلة في مدونتك DEMO

يجب توافرها على كل موقع، إذ تعتبر أزرار المراسلة الاجتماعية من أهم الطرق لاشهار موقعك على الشبكة العنكبوتية. كما أنها تعتبر مصدرًا رئيسيًا للزوار في بداية كل موقع أو مدونة. لهذا سأقدم لكم اليوم أفضل إضافة لأزرار المراسلة في مدونتك.

يبدو هذا السؤال واضحًا، والإجابة عليه أكثر من واضحة. على سبيل المثال، بالنسبة إلى برامج المراسلة الفورية، يتم تكوين الارتباط بشكل مختلف قليلاً، ويتم تعيين بادئة tel للرابط إلى مكالمة من الهاتف، وما إلى ذلك.

من خلال هذا الاستعراض القصير، سنتعلم كيفية إنشاء رابط إلى هاتف قابل للنقر عليه (نشط)، وسننشئ أيضًا رابطًا نشطًا للبريد ولجميع برامج المراسلة الفورية الشائعة: Viber و Skype و WhatsApp و Telegram و ICQ. سنقوم بتحليل كل واحد على حدة، وفي النهاية سنجمع كل شيء في قالب واحد ونصنع التصميم بحيث يكون كل شيء جميلًا.

رابط الهاتف النشط على الموقع

لكي يعمل رقم الهاتف الموجود على الموقع كمكالمة نشطة عند النقر عليه، يلزمك كتابة قيمة tel في سمة href. عند النقر على الرابط، ستظهر نافذة تسأل عن التطبيق الذي سيتم فتح الهاتف من خلاله.

<a class="phone-but" href="tel:+12345678912">اتصل بنا</a>
<!-- مثال مع الصورة -->
<a class="phone-but" href="tel:+12345678912"><img src="img/phone.png" alt="رقم الهاتف"/></a>

رابط نشط لإرسال الرسائل عبر البريد الإلكتروني

الوضع مشابه هنا، لكننا نكتب قيمة mailto في سمة الرابط. يؤدي النقر فوق هذا الارتباط إلى فتح نافذة نموذج يُطلب فيها تحديد تطبيق لفتح ارتباط البريد الإلكتروني.

<a class="email-but" href="mailto:moypochta@gmail.com">راسلني</a>
<a class="email-but" href="mailto:moypochta@gmail.com?subject=Thank you for the article&body=Hello! The article was useful for me">راسلني</a>
  

رابط نشط لفايبر على الموقع

يحتوي Viber على تنسيق ارتباط مختلف لأجهزة مختلفة. ومع ذلك، هناك ارتباط عالمي يعمل على جميع الأجهزة. تذكر أنه يجب تثبيت تطبيق Viber على الجهاز.

<a class="viber-but" href="viber://chat?number=%2B75555555559">راسلني بواسطة Viber</a>
  

رابط تيليجرام نشط للموقع

لا توجد صعوبات خاصة مع ارتباط برقية. يتم إدخال اسم المستخدم ببساطة والرابط جاهز.

<a class="teleg-but" href="https://t.me/username">اكتب عن طريق Telegram</a>
  

رابط نشط إلى Skype على الموقع

يشبه رابط Skype برامج المراسلة الفورية الأخرى. يمكنك إنشاء رابط لمكالمة أو رابط إلى دردشة.

<!-- رابط الاتصال -->
<a class="skype-but" href="skype:username?call">اتصل علي Skype</a>
<!-- رابط الدردشة -->
<a class="skype-but" href="skype:username?chat">اكتب علي Skype</a>
  

رابط نشط إلى ICQ على الموقع

يوجد أيضًا ارتباط خاص بخدمة ICQ يقوم عند النقر فوقه بإضافة جهة اتصال إلى قائمة جهات الاتصال الخاصة بك.

<a class="icq-but" href="icq:999999999">إضافة جهة اتصال ICQ</a>
  

إضافة جميع أزرار المراسلة في مدونتك DEMO

أولاً: كود HTML

<div class="social-buttons">
  <a class="social-button skype-but" href="skype:username?chat">
    <i class="fa fa-skype" aria-hidden="true"></i>
  </a>
  <a class="social-button whats-but" href="https://api.whatsapp.com/send?phone=77788899965">
    <i class="fa fa-whatsapp"></i>
  </a>
  <a class="social-button teleg-but" href="https://t.me/username">
    <i class="fa fa-telegram" aria-hidden="true"></i>
  </a>
  <a class="social-button icq-but" href="icq:999999999">
    <i class="fa fa-asterisk" aria-hidden="true"></i>
  </a>
  <a class="social-button viber-but" href="viber://chat?number=%2B75555555559">
    <i class="fa fa-phone-square" aria-hidden="true"></i>
  </a>
  <a class="social-button email-but" href="mailto:moypochta@gmail.com?subject=Thank you for the article&body=Hi! The article was useful for me">
    <i class="fa fa-envelope"></i>
  </a>
  <a class="social-button phone-but" href="tel:+12345678912_">
    <i class="fa fa-phone" aria-hidden="true"></i>
  </a>
</div>
      

ثانياً: كود CSS

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

.social-buttons {
  height: 90px;
}

.social-button {
  display: inline-block;
  background-color: #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin: 0 3px;
  text-align: center;
  position: relative;
  overflow: hidden;
  opacity: .99;
  border-radius: 28%;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
  -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}

.social-button:before {
  content: '';
  background-color: #000;
  width: 120%;
  height: 120%;
  position: absolute;
  top: 90%;
  left: -110%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}

.social-button .fa {
  font-size: 28px;
  vertical-align: middle;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}

.social-button.skype-but:before {
  background-color: #00A3E7;
}
.social-button.skype-but .fa {
  color: #00A3E7;
}

.social-button.whats-but:before {
  background-color: #4dc247;
}
.social-button.whats-but .fa {
  color: #4dc247;
}

.social-button.email-but:before {
  background-color: #ff6600;
}
.social-button.email-but .fa {
  color: #ff6600;
}

.social-button.phone-but:before {
  background-color: #000;
}
.social-button.phone-but .fa {
  color: #000;
}

.social-button.teleg-but:before {
  background-color: #31A9DD;
}
.social-button.teleg-but .fa {
  color: #31A9DD;
}

.social-button.icq-but:before {
  background-color: #24FF00;
}
.social-button.icq-but .fa {
  color: #24FF00;
}

.social-button.viber-but:before {
  background-color: #7B519C;
}
.social-button.viber-but .fa {
  color: #7B519C;
}

.social-button:focus:before, .social-button:hover:before {
  top: -10%;
  left: -10%;
}
.social-button:focus .fa, .social-button:hover .fa {
  color: #fff;
  -webkit-transform: scale(1);
          transform: scale(1);
}
    

شرح الكود:

• HTML: يحتوي على أزرار المراسلة مع روابط لكل تطبيق (Skype، WhatsApp، Telegram، ICQ، Viber، البريد الإلكتروني، الهاتف).
• CSS: يضيف تصميمًا جذابًا للأزرار مع تأثيرات عند التمرير أو النقر. يتم استخدام مكتبة Font Awesome للأيقونات.

فوائد الكود:

• سهولة التواصل مع الزوار عبر تطبيقات المراسلة المختلفة.
• تصميم جذاب وتفاعلي يعزز تجربة المستخدم.
• إمكانية تخصيص الأزرار وإضافة المزيد من التطبيقات بسهولة.

معاينة الكود